* {
  outline: none;
}

section {
  width: 300px;
  height: 100px;
  /* background: red; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -80%);
}

button {
  width: 300px;
  height: 100px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-size: 30px;
  margin-bottom: 20px;
  box-shadow: 1px 1px 10px gray;
}

button::before{
  position: absolute;
  content: "";
  left: 10px;
  /* top: 10px; */
  width: 80px;
  height: 80px;
  background: rgb(171, 187, 170);
  border-radius: 50%;

}

button:focus::before {
  transition: 0.1s;
  left: 210px;
  box-shadow: 1px 1px 10px black;
}

button:focus{
  background: rgb(167, 204, 149);
  border-left: 2px solid red;
  transition: border .4s;
}

#btn::before{
  top: 10px;
}

#btn2::before{
  transform: translateY(-23px);
}


#ShowClickNum_bar {
  /* margin: auto; */
  position: absolute;
  background: gray;
  text-align: center;
  width: 300px;
  height: auto;
  margin-top: 50px;
  font-size: 30px;
  color: white;
  box-shadow: 1px 1px 10px black;
}
#ShowClickNum_bar::before{
  content: "Counted: ";
}
